<!--根组件-->
<template>
  <div>
    <Main>
    </Main>
    <Tabs name="main" value="interface">
      <TabPane label="接口列表" icon="logo-apple" name="interface" tab="main">
        <Row>
          <Col span="4">
            <Table stripe height="800" :columns="interfaceColumns" :data="interfaceListData"
                   @on-row-click="openInterface"></Table>
          </Col>
          <Col span="20">
            <InterfaceLoad></InterfaceLoad>
          </Col>
        </Row>
        <Row>
          <Button type="primary" shape="circle" @click="addNewInterface"> 新增</Button>
          <Button type="warning" shape="circle" :disabled="saveDisabled" @click="saveAllInterface">保存</Button>
          <Button type="error" shape="circle">删除</Button>
        </Row>
      </TabPane>
      <TabPane label="自动化测试" icon="logo-apple" name="autoTest" tab="main">
        <Row>
          <Col span="4">
            <AutoTestList></AutoTestList>
          </Col>
          <Col span="20">

          </Col>
        </Row>
      </TabPane>
      <TabPane label="设置" icon="logo-tux" name="config" tab="main">标签三的内容</TabPane>
    </Tabs>
  </div>
</template>

<script>
import InterfaceLoad from "./InterfaceLoad";
import AutoTestList from "./AutoTestList";
import Main from "./Main";
import bus from 'emitvue';
import electron from 'electron';
import _ from 'lodash';
import {v4} from 'uuid';

const utils = require('./lib/utils.js');
const store = electron.remote.getGlobal('store');
export default {
  name: "Home",
  data() {
    return {
      interfaceColumns: [
        {
          title: '接口名称',
          key: "name",
        },
        {
          title: "操作",
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeInterface(params.index)
                  }
                }
              }, 'Delete')
            ]);
          },
          width: "100px",
        }
      ],
      interfaceListData: [],
      selectedNode: null,
      saveDisabled: true,
    }
  },
  methods: {
    treeChange(v, g) {
      console.log('v=', v);
      console.log('g=', g);
      this.selectedNode = v;
    },
    getInterfaceList() {
      let interfaceList = store.get('interfaceList');
      console.log('interfaceList = ', interfaceList);
      interfaceList = utils.safeJsonParse(interfaceList);
      this.interfaceListData = interfaceList;
      if (!interfaceList || !_.isArray(interfaceList)) {
        this.interfaceListData = [];
        console.log('接口列表为空 初始化...');
        store.set('interfaceList',JSON.stringify([]));
      }
    },
    //增加接口
    addNewInterface() {
      console.log('新增接口 this.interfaceList', this.interfaceListData);
      let name = v4();
      this.interfaceListData.push({
        name,
        data: {
          name,
        },
      });
      this.saveDisabled = false;
    },
    removeInterface(index) {
      this.interfaceListData.splice(index, 1);
      this.saveDisabled = false;
    },
    openInterface(data, index) {
      console.log("当前选中的index为 ", index);
      console.log('this.interfaceListData = ', this.interfaceListData)
      bus.$emit('interfaceLoad', this.interfaceListData[index].data);
    },
    // 保存所有接口
    saveAllInterface() {
      try {
        store.set('interfaceList', JSON.stringify(this.interfaceListData));
        this.$Message.success('保存成功');
      } catch (err) {
        this.$Message.error("保存出错->" + err.toString());
      }
    },
    saveSingleInterface(data) {
      let find = false;
      let index = -1;
      console.log('name  = ', data.rawName);
      // 在列表找到接口名字对应的值 进行替换
      for (let i = 0; i < this.interfaceListData.length; i++) {
        if (this.interfaceListData[i].name === data.rawName && (find === false)) {
          find = true;
          index = i;
        } else if (this.interfaceListData[i].name === data.rawName && (find === true)) {
          this.$Message.error("接口名称不能重复");
          return;
        }
      }

      // 没找到对应的接口
      if (index === -1) {
        this.$Message.error('软件出现问题 进行重置！');
        this.interfaceListData = [];
        store.set('interfaceList', JSON.stringify(this.interfaceListData));
        return;
      }

      // 这里rawName就没用了
      data.rawName = data.name;
      this.interfaceListData[index].data = data;
      this.interfaceListData[index].name = data.name;
      store.set('interfaceList', JSON.stringify(this.interfaceListData));
      this.$Message.success('保存接口信息成功');
      // vue页面重新绘制 这里不需要用
      // location.reload();
    },
  },
  components: {
    InterfaceLoad,
    Main,
    AutoTestList,
  },
  mounted() {
    this.getInterfaceList();
    // 保存单个接口
    bus.$on('saveSingleInterface', (data) => {
      this.saveSingleInterface(data);
    });
  },

}
</script>

<style scoped>

</style>


